<!DOCTYPE html>
<html lang="zh">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>学习助手</title>
    <link rel="stylesheet" type="text/css" href="./static/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="./static/css/style.css">
    <link rel="icon" href="./static/img/logo.png" type="image/png">
</head>

<style>
    body,
    html {
        margin: 0;
        padding: 0;
    }

    .title_label {
        top: 5px;
        height: 29px;
        width: 100%;
        color: rgba(255, 255, 255, 1);
        font-size: 20px;
        text-align: center;
        font-family: PingFangSC-bold;
        font-weight: 700;
    }

    .header_main {
        width: 100%;
        margin: auto;
        background-image: url(/static/img/head_bg.png);
        background-position: top -110px right 0px;
        height: auto;
        padding: 20px; 

        background-size: cover;
        background-size: 100%;
        background-repeat: no-repeat;
        color: dimgray;

    }

    .row {
        margin-top: 10px;
    }

    .m-l-30 {
        margin-left: 30px;
    }


    .buttoncontainer {
        text-align: center;
        height: 100vh;
        /* 使用视口高度单位，使容器占据整个视口高度 */
    }

    .submit {
        margin: auto;
        display: inline-block;
        color: white;
        background-color: #17ad74;
        width: 100%;
        height: 50px;
        border-radius: 10px;
        border: 0px; 
    }
</style>
<body id="mainAPP" class="header_main">
    <header id="home">
        <div  style="margin-bottom: 5px;"> <img src="../static/img/logo.png" alt="" width="90%" srcset="">
        </div>
    </header>
    <div class="row  ">
        <div class=" col-12" style="height: 600px;">
            <div class="taital_main">
                <input type="text" class="input_item" placeholder="请输入学号" id="nameInput">
                <input type="password" class="input_item" placeholder="请输入密码" id="pswdInput">
                <button type="button" class="input_submit" onclick="loginHandler()">登录 </button>
                <div id="infoDiv" class="margin-top-20">
                </div>
            </div>
        </div>
    </div>
    
    <script src="./static/bootstrap/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="./static/js/axios.min.js"></script>
    <script type="text/javascript" src="./static/js/md5.js"></script>
    <link rel="stylesheet" type="text/css" href="./static/bootstrap/css/bootstrap.min.css">

    <link rel="stylesheet" type="text/css" href="./static/css/style.css">
    <link rel="icon" href="./static/img/icon.png" type="image/png">
    <script type="text/javascript">
    
        function loginHandler() {
            var nameValue = document.getElementById("nameInput").value;
            // 使用md5进行加密后再发送到后端
            var pswdValue = md5(document.getElementById("pswdInput").value);
            // 使用get方式调用API 
            axios.post('/api/classmates/login',
                {
                    Sn: nameValue,
                    PSWD: pswdValue,
                }, {
            }).then(function (response) {
                if (response.data.jwt) { 
                    sessionStorage.setItem("token", response.data.jwt); 
                    sessionStorage.setItem("id", response.data.data.Id);
                    sessionStorage.setItem("user",   JSON.stringify(response.data.data) );
                    localStorage.setItem("courseList", JSON.stringify(response.data.courseList));
                    //    直接跳转到主页面
                    window.location.href = "/home"
                } else {
                    document.getElementById("infoDiv").innerText = "账号错误，请检查";
                }
            }).catch(function (error) {
                document.getElementById("infoDiv").innerText = error;
            });
        } 
    </script>
  <div style="position:absolute; bottom: 0px;left: 0; width: 100%;   background-color: #17ad74; " id="bottomBox">
    <div style="text-align: center;">计网.云计算方向</div>
</div>
</body>

</html>